<template>
  <div class="page-container">
    <slot></slot>
    <div class="CountStatus">
      <el-descriptions
        labelClassName="labelClassName"
        contentClassName="contentClassName"
        direction="vertical"
        :column="table_model.length"
        border
      >
        <el-descriptions-item v-for="item in table_model" :key="item" :label="item">
          {{ CountStatus[item] }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <ex_super_table_page
      ref="SuperTablePage"
      v-if="showSuperTable"
      v-bind="option"
      @selection-change="(e) => (selection = e)"
    >
    </ex_super_table_page>
    <!-- 提报工单 -->
    <ex_super_dialog_form
      ref="catalogueRef"
      v-bind="workorder_dialog"
      :disabled="true"
      @afterSubmitSuccess="$refs['SuperTablePage'].reload()"
    >
    </ex_super_dialog_form>
    <!-- 工单受理 -->
    <template v-if="catalogue_dialog">
      <ex_super_dialog_form
        ref="AcceptanceRef"
        v-bind="catalogue_dialog"
        @afterSubmitSuccess="$refs['SuperTablePage'].reload()"
      />
    </template>
    <!-- 工单关闭 -->
    <ex_super_dialog_form
      ref="workCloseRef"
      v-bind="workClose_dialog"
      @afterSubmitSuccess="$refs['SuperTablePage'].reload()"
    />
  </div>
</template>
<script>
import business_function from "@/common/business_function";
import { method } from "lodash";
// import catalogueDialog from "./dialog/catalogue-dialog.vue";
import page_table_model_manage from "@/mixin/page_table_model_manage";
import superTablePageFunction from "@/mixin/super-table-page-function";
export default {
  title: "label_workorder_list",
  mixins: [superTablePageFunction, page_table_model_manage],
  props: {
    rootId: {
      type: Number,
      default: 1,
      required: true,
    },
  },
  data() {
    return {
      showSuperTable: true,
      selection: [],
      CountStatus: [],
      // "待受理", "受理驳回",
      table_model: ["全部", "待反馈", "待处理", "待确认", "已关闭"],
      option: {
        search: {
          default: { rootId: this.rootId },
          model: [
            {
              key: "name",
              label: "工单目录",
              // type: "workorder_catalogue_select",
              //
              render: (h, { data }) => {
                return h("workorder_catalogue_cascader", {
                  // class: "form_input_default",
                  props: {
                    needRootCatalog: "N",
                    value: data.ticketsCatalogId,
                    rootId: this.rootId,
                    // disabled: this.checkinFormDisabled("customerId"),
                  },
                  on: {
                    changeItem: (e) => {
                      this.$set(data, "ticketsCatalogId", e.id);
                    },
                  },
                });
              },
            },
            {
              key: "scenario",
              label: "场景解析",
              // type: "select",
              // enum: "TicketsStatusEnum",
              // type: "common_customer_choose",
            },
            {
              key: "status",
              label: "状态",
              type: "select",
              enum: "TicketsStatusEnum",
              // items: this.$localEnum.TicketsStatusEnum,
            },
            {
              key: "submitTimeBegin",
              label: "提报时间开始",
              type: "date-picker",
              attrs: { type: "datetime", "default-time": "00:00:00" },
              // formatter: (r, c, v, i) => this.$dateFormat(v),
            },

            {
              key: "submitTimeEnd",
              label: "提报时间结束",
              type: "date-picker",
              attrs: { type: "datetime", "default-time": "23:59:59" },
              // formatter: (r, c, v, i) => this.$dateFormat(v),
            },
            {
              key: "author",
              label: "提报人",
              render: (h, { data }) => {
                return h("user_select", {
                  class: "form_input_default",
                  props: {
                    value: data.author,
                  },
                  on: {
                    changeItem: (e) => {
                      this.$set(data, "author", e.name);
                    },
                  },
                });
              },
            },
            {
              key: "customerName",
              label: "客户名称",
              render: (h, { data }) => {
                return h("common_customer_choose", {
                  class: "form_input_default",
                  props: {
                    value: data.customerName,
                  },
                  on: {
                    changeItem: (e) => {
                      this.$set(data, "customerName", e.customerName);
                    },
                  },
                });
              },
            },

            {
              key: "businessCode",
              label: "业务单号",
              formatter: (r, c, v, i) => {
                console.log("r ===== ", r);
                return 123;
              },
              // type: "select",
              // enum: "TicketsStatusEnum",
              // type: "common_customer_choose",
            },
          ],
        },
        actionExtra: [
          {
            // label: "提报工单",
            label: "label_report_workorder",
            auth: `oms_workorder_report_${this.rootId}`,
            attrs: { icon: "el-icon-plus", type: "primary" },
            click: () => {
              this.workorder_dialog.title = "提报工单";
              this.workorder_dialog.submitUrl =
                "/oms-api/tickets/OmsBaseTicketsRpc/save.json";
              this["$refs"]["catalogueRef"].show();
              this.clearFrom("catalogueRef");
            },
          },
          // {
          //   label: "工单受理",
          //   attrs: { icon: "el-icon-plus", type: "primary" },
          //   click: () => {
          //     if (_.isEmpty(this.selection)) return this.$message.error("请选择工单目录");
          //     if (this.selection.length > 1)
          //       return this.$message.error("只能选择一个工单");
          //       this.onAcceptanceCatalogue(this.selection, 1);
          //   },
          // },
          {
            // label: "工单关闭",
            label: "label_close_workorder",
            auth: `oms_workorder_close_${this.rootId}`,
            attrs: { icon: "el-icon-circle-close", type: "primary" },
            click: () => {
              if (_.isEmpty(this.selection)) return this.$message.error("请选择工单目录");
              if (this.selection.length > 1)
                return this.$message.error("只能选择一个工单");
              this.workClose_dialog.form.default = {
                ticketsIds: this.selection[0].id,
                type: this.selection[0].type,
              };
              this["$refs"]["workCloseRef"].show({ id: this.selection[0].id });
              this.clearFrom("workCloseRef");
            },
          },
          {
            label: "label_catalogue_export",
            auth: `oms_workorder_export_${this.rootId}`,
            attrs: { icon: "el-icon-plus", type: "primary" },
            click: this.exportExcel,
          },
          // {
          //   label: "停用",
          //   attrs: { icon: "el-icon-plus", type: "primary" },
          //   click: () => {
          //     if (_.isEmpty(this.selection)) return this.$message.error("请选择工单目录");
          //     this.onEnableCatalogue(this.selection);
          //   },
          // },
          // {
          //   label: "删除",
          //   attrs: { icon: "el-icon-plus", type: "primary" },
          // },
          // {
          //   label: "导出",
          //   attrs: { icon: "el-icon-plus", type: "primary" },
          //   click: this.exportExcel,
          // },
        ],
        table: {
          url: "/oms-api/tickets/OmsBaseTicketsRpc/getTicketsList.json",
          model: this.init_table_model(),
          // model: this.init_table_model(),
          // url: this.$url["oms/BaseAnomaly"],
          // model: [
          //   { type: "selection", clickToggle: true },
          //   {
          //     key: "code",
          //     label: "工单编码",
          //     // minWidth: 120,
          //     "show-overflow-tooltip": true,
          //   },
          //   {
          //     key: "customerName",
          //     label: "客户名称",
          //     // width: 1200,
          //     "show-overflow-tooltip": true,
          //   },
          //   {
          //     key: "status",
          //     label: "状态",
          //     width: 120,
          //     "show-overflow-tooltip": true,
          //     formatter: (r, c, v, i) => {
          //       const val_ = this.$localEnum.TicketsStatusEnum.find(
          //         (el) => el.value === r.status
          //       );
          //       return val_ ? val_.label : r.status;
          //     },
          //   },
          //   {
          //     key: "type",
          //     label: "工单类型",
          //     // width: 120,
          //     "show-overflow-tooltip": true,
          //     formatter: (r, c, v, i) => {
          //       const val_ = this.$localEnum.TicketsTypeEnum.find(
          //         (el) => el.value === r.type
          //       );
          //       return val_ ? val_.label : r.type;
          //     },
          //   },
          //   // {
          //   //   key: "ticketsCatalogName",
          //   //   label: "工单目录",
          //   //   // minWidth: 120,
          //   //   "show-overflow-tooltip": true,
          //   // },
          //   {
          //     key: "description",
          //     label: "工单详细描述",
          //     // width: 120,
          //   },
          //   {
          //     key: "urgency",
          //     label: "紧急程度",
          //     width: 120,
          //     formatter: (r, c, v, i) => {
          //       const val_ = this.$localEnum.TicketsUrgencyEnum.find(
          //         (el) => el.value === r.urgency
          //       );
          //       return val_ ? val_.label : r.urgency;
          //     },
          //   },
          //   // {
          //   //   key: "urgency",
          //   //   label: "反馈方式",
          //   //   // width: 120,
          //   //   // formatter: (r, c, v, i) => this.$enumShow(v, "PrescriptionUnitEnum"),
          //   // },
          //   {
          //     key: "gmtSubmit",
          //     label: "提报时间",
          //     formatter: (r, c, v, i) => this.$dateFormat(v),
          //     // width: 120,
          //     // formatter: (r, c, v, i) => this.$enumShow(v, "PrescriptionUnitEnum"),
          //   },
          //   {
          //     key: "author",
          //     label: "提报人",
          //     // width: 120,
          //     // formatter: (r, c, v, i) => this.$enumShow(v, "PrescriptionUnitEnum"),
          //   },
          //   {
          //     key: "userDeptName",
          //     label: "跟进部门",
          //     // width: 120,
          //     // formatter: (r, c, v, i) => this.$enumShow(v, "PrescriptionUnitEnum"),
          //   },
          //   {
          //     key: "userRoleName",
          //     label: "跟进角色",
          //     // width: 120,
          //     // formatter: (r, c, v, i) => this.$enumShow(v, "PrescriptionUnitEnum"),
          //   },
          //   {
          //     key: "inWhichPart",
          //     label: "所在环节",
          //     // width: 120,
          //     // formatter: (r, c, v, i) => this.$enumShow(v, "PrescriptionUnitEnum"),
          //   },
          //   {
          //     key: "handleExpire",
          //     label: "处理是否已超时",
          //     width: 150,
          //     formatter: (r, c, v, i) => {
          //       return r.handleExpire === "Y" ? "是" : "否";
          //     },
          //   },
          //   {
          //     key: "transferExpire",
          //     label: "流转是否已超时",
          //     width: 150,
          //     formatter: (r, c, v, i) => {
          //       return r.handleExpire === "Y" ? "是" : "否";
          //     },
          //   },
          //   {
          //     type: "operate",
          //     width: 210,
          //     operate: [
          //       // {
          //       //   label: "复核",

          //       //   click: (row) => {},
          //       // },

          //       {
          //         type: "more",
          //         items: [
          //           {
          //             label: "label_view_detail",
          //             auth: `oms_workorder_detail_${this.rootId}`,
          //             click: (row) => {
          //               this.$router.push({
          //                 path: "/page/oms/workorder/workorder_detail",
          //                 query: { id: row.id },
          //               });
          //             },
          //           },
          //           {
          //             label: "label_close_workorder",
          //             auth: `oms_workorder_close_${this.rootId}`,
          //             click: (row) => {
          //               this.workClose_dialog.form.default = {
          //                 ticketsIds: row.id,
          //                 type: row.type,
          //               };
          //               this["$refs"]["workCloseRef"].show({ id: row.id });
          //               this.clearFrom("workCloseRef");
          //             },
          //             if: (row) =>
          //               ["TO_BE_HANDLE", "TO_BE_CONFIRMED"].includes(row.status),
          //           },
          //           {
          //             // label: "核查反馈",
          //             label: "label_view_examine",
          //             auth: `oms_workorder_examine_${this.rootId}`,
          //             click: (row) => {
          //               this.onAcceptanceCatalogue(row, 2);
          //             },
          //             if: (row) =>
          //               ["TO_BE_FEEDBACK", "TO_BE_HANDLE"].includes(row.status),
          //           },
          //         ],
          //       },
          //     ],
          //   },
          // ],
        },
      },
      catalogue_dialog: null,
      workorder_dialog: {
        title: "新增工单",
        customClass: "dialog_auto",

        // submitUrl: "",
        detailUrl: "/oms-api/tickets/OmsBaseTicketsRpc/getTickets.json",
        form: {
          itemClass: "form_item_default",
          inputClass: "form_input_default",
          formClass: "form_default_col2 flex_row_wrap",
          default: {
            // type: "QUESTION",
          },
          model: [
            // { header: "新增工单目录" },

            {
              key: "customerName",
              label: "客户名称",
              render: (h, { data }) => {
                return h("common_customer_choose", {
                  class: "form_input_default",
                  props: {
                    value: data.customerName,
                  },
                  on: {
                    changeItem: (e) => {
                      this.$set(data, "customerId", e.customerId);
                      this.$set(data, "customerName", e.customerName);
                    },
                  },
                });
              },
              rules: {
                required: true,
                message: "请选择客户名称",
                trigger: "change",
              },
            },
            {
              key: "type",
              label: "工单类型",
              type: "select",
              enum: "TicketsTypeEnum",
              formatter: (r, c, v, i) => {
                const val_ = this.$localEnum.TicketsTypeEnum.find(
                  (el) => el.value === r.type
                );
                return val_ ? val_.label : r.type;
              },
              rules: {
                required: true,
                message: "请选择工单类型",
                trigger: "change",
              },
            },
            {
              key: "urgency",
              label: "紧急程度",
              type: "select",
              enum: "TicketsUrgencyEnum",
              formatter: (r, c, v, i) => {
                const val_ = this.$localEnum.TicketsUrgencyEnum.find(
                  (el) => el.value === r.urgency
                );
                return val_ ? val_.label : r.urgency;
              },
              rules: {
                required: true,
                message: "请选择紧急程度",
                trigger: "change",
              },
            },
            {
              key: "ticketsCatalogId",
              label: "工单目录",
              // type: "workorder_catalogue_select",
              render: (h, { data }) => {
                return h("workorder_catalogue_cascader", {
                  class: "form_input_default",
                  props: {
                    value: data.ticketsCatalogId,
                    needRootCatalog: "N",
                    type: data.type,
                    rootId: this.rootId,
                    // disabled: this.checkinFormDisabled("customerId"),
                  },
                  on: {
                    changeItem: (e) => {
                      this.$set(data, "ticketsCatalogId", e.id);
                    },
                  },
                });
              },
              rules: {
                required: true,
                message: "请选择工单目录",
                trigger: "change",
              },
            },
            {
              key: "businessClassify",
              label: "业务分类",
              type: "select",
              enum: "TicketsBusinessClassifyEnum",
              formatter: (r, c, v, i) => {
                const val_ = this.$localEnum.TicketsBusinessClassifyEnum.find(
                  (el) => el.value === r.businessClassify
                );

                return val_ ? val_.label : r.businessClassify;
              },
            },
            {
              key: "businessCode",
              label: "业务单号",
              // if: () => !this.checkinFormHidden("orderNo"),
              // disabled: () => this.checkinFormDisabled("orderNo"),
              // formType: () => this.checkinFormType("orderNo"),
              attrs: { maxlength: 30, "show-word-limit": true },
            },
            {
              key: "description",
              label: "工单描述",
              itemClass: "row_2_box",
              inputClass: "row_2_input",
              attrs: { type: "textarea", autosize: { minRows: 2, maxRows: 6 } },
              rules: {
                required: true,
                message: "请输入工单详细描述",
                trigger: "blur",
              },
            },
            {
              key: "uploadFiles",
              label: "附件",
              type: "upload-file",
              attrs: { limit: 1 },
              render: (h, { data }) => {
                return h("ex-upload-file", {
                  props: {
                    limit: 1,
                    value: data.uploadFiles,
                  },
                  on: {
                    input: (list) => {
                      this.$set(data, "uploadFiles", list);
                    },
                  },
                });
              },
            },
          ],
          rules: {
            // businessClassify: {
            //   required: true,
            //   message: "请选择业务分类",
            //   trigger: "change",
            // },
            // businessCode: {
            //   required: true,
            //   message: "请输入业务单号",
            //   trigger: "blur",
            // },
          },
        },
      },
      acceptance_from: [
        {
          key: "accept",
          label: "是否受理",
          enum: "YesOrNoEnum_CN",
          type: "select",
          formatter: (r, c, v, i) => {
            const val_ = this.$localEnum.YesOrNoEnum_CN.find(
              (el) => el.value === r.accept
            );
            return val_ ? val_.label : r.accept;
          },
          rules: {
            required: true,
            message: "请选择是否受理",
            trigger: "change",
          },
        },
        {
          key: "recipientId",
          label: "受理人",
          rules: {
            required: true,
            message: "请选择受理人",
            trigger: "change",
          },
          render: (h, { data }) => {
            return h("user_select", {
              class: "form_input_default",
              props: {
                value: data.recipient,
              },
              on: {
                changeItem: (e) => {
                  this.$set(data, "recipientId", e.securityId);
                  this.$set(data, "recipient", e.name);
                  console.log("data", data);
                },
              },
            });
          },
          // attrs: { type: "textarea", autosize: { minRows: 2, maxRows: 6 } },
          // formatter: (r, c, v, i) => this.$dateFormat(v),
        },
      ],

      detailsField: [
        {
          key: "code",
          label: "工单编号",
          formType: "text",
        },

        {
          key: "status",
          label: "状态",
          formType: "text",
          formatter: (r, c, v, i) => {
            const val_ = this.$localEnum.TicketsStatusEnum.find(
              (el) => el.value === r.status
            );
            return val_ ? val_.label : r.status;
          },
        },
        {
          key: "author",
          label: "提报人",
          formType: "text",
        },

        {
          key: "gmtSubmit",
          label: "提报时间",
          formType: "text",
          formatter: (r, c, v, i) => this.$dateFormat(v),
        },
        {
          key: "userDeptName",
          label: "跟进部门",
          formType: "text",
        },
        {
          key: "userRoleName",
          label: "跟进角色",
          formType: "text",
        },
        {
          key: "follower",
          label: "跟进人",
          formType: "text",
        },
        {
          key: "gmtFollow",
          label: "跟进时间",
          formType: "text",
          formatter: (r, c, v, i) => this.$dateFormat(v),
        },
        // {
        //   key: "remark",
        //   label: "工单备注",
        //   formType: "text",
        // },
      ],
      workClose_dialog: {
        title: "关闭提醒",
        customClass: "dialog_auto",

        submitUrl: "/oms-api/tickets/OmsBaseTicketsRpc/closeTickets.json",
        detailUrl: "/oms-api/tickets/OmsBaseTicketsRpc/getTickets.json",
        form: {
          itemClass: "form_item_default",
          inputClass: "form_input_default",
          formClass: "form_default_col2 flex_row_wrap",
          default: {
            // type: "QUESTION",
          },
          model: [
            { header: "选择的工单是否已关闭，关闭后的工单无需继续跟进！" },

            {
              key: "code",
              label: "工单编号",
              formType: "text",
            },

            {
              key: "status",
              label: "状态",
              formType: "text",
              formatter: (r, c, v, i) => {
                const val_ = this.$localEnum.TicketsStatusEnum.find(
                  (el) => el.value === r.status
                );
                return val_ ? val_.label : r.status;
              },
            },
            {
              key: "author",
              label: "提报人",
              formType: "text",
            },

            {
              key: "gmtSubmit",
              label: "提报时间",
              formType: "text",
              formatter: (r, c, v, i) => this.$dateFormat(v),
            },
            {
              key: "userDeptName",
              label: "跟进部门",
              formType: "text",
            },
            {
              key: "userRoleName",
              label: "跟进角色",
              formType: "text",
            },
            {
              key: "follower",
              label: "跟进人",
              formType: "text",
            },
            {
              key: "gmtFollow",
              label: "跟进时间",
              formType: "text",
              formatter: (r, c, v, i) => this.$dateFormat(v),
            },
            // {
            //   key: "remark",
            //   label: "工单备注",
            //   formType: "text",
            // },
            {
              key: "customerName",
              label: "客户名称",
              formType: "text",
            },
            {
              key: "type",
              label: "工单类型",
              formType: "text",
              formatter: (r, c, v, i) => {
                const val_ = this.$localEnum.TicketsTypeEnum.find(
                  (el) => el.value === r.type
                );
                return val_ ? val_.label : r.type;
              },
            },
            {
              key: "urgency",
              label: "紧急程度",
              formType: "text",
              formatter: (r, c, v, i) => {
                const val_ = this.$localEnum.TicketsUrgencyEnum.find(
                  (el) => el.value === r.urgency
                );
                return val_ ? val_.label : r.urgency;
              },
            },
            {
              key: "ticketsCatalogName",
              label: "工单目录",
              formType: "text",
            },
            {
              key: "businessClassify",
              label: "业务分类",
              formType: "text",
              formatter: (r, c, v, i) => {
                const val_ = this.$localEnum.TicketsBusinessClassifyEnum.find(
                  (el) => el.value === r.businessClassify
                );
                return val_ ? val_.label : r.businessClassify;
              },
            },
            {
              key: "businessCode",
              label: "业务单号",
              formType: "text",
              render: (h, { data }) => {
                if (data.businessCode) {
                  return h(
                    "div",
                    {
                      class: "flex_row_center",
                    },
                    [
                      h("span", {}, data.businessCode),
                      h(
                        "el-button",
                        {
                          // class: 'el-icon-arrow-down el-icon--right',
                          style: { marginLeft: "20px" },
                          props: { type: "primary" },
                          on: {
                            click: (e) =>
                              this.onTableSearch(data.businessCode, "workCloseRef"),
                          },
                        },
                        "查看工单"
                      ),
                    ]
                  );
                }
              },
            },
            {
              key: "description",
              label: "工单描述",
              formType: "text",
            },
            {
              key: "uploadFiles",
              label: "附件",
              type: "upload-file",
              attrs: { limit: 1 },
              render: (h, { data }) => {
                return h("ex-upload-file", {
                  props: {
                    limit: 1,
                    value: data.uploadFiles,
                    disabled: true,
                    readonly: true,
                  },
                  on: {
                    input: (list) => {
                      this.$set(data, "uploadFiles", list);
                    },
                  },
                });
              },
            },
            {
              key: "verifyRecordDTOS",
              label: "升级数据",
              if: (r) => r.verifyRecordDTOS && r.verifyRecordDTOS.length > 0,
              render: (h, { data }) => {
                const list = [];
                //
                data.verifyRecordDTOS.map((el) => {
                  if (el.ifUpgrade === "Y") {
                    list.push(
                      h(
                        "div",
                        {},
                        `升级原因：${el.upgradeReason || ""} ; 核查反馈信息：${
                          el.verifyDesc || ""
                        }`
                      )
                    );
                  }
                });
                return h(
                  "div",
                  {
                    class: "verifyRecordDTOS",
                  },
                  list
                );
              },
            },
            {
              key: "verifyUploadFiles",
              label: "核查文件",
              type: "upload-file",
              render: (h, { data }) => {
                return h("ex-upload-file", {
                  props: {
                    // limit: 1,
                    value: data.verifyUploadFiles,
                    disabled: true,
                    readonly: true,
                  },
                });
              },
            },
            {
              key: "verifyDesc",
              label: "核查描述",
              formType: "text",
            },
            {
              key: "ifResponsible",
              label: "是否有责",
              type: "select",
              enum: "YesOrNoEnum_CN",
              if: (row) => {
                return row.type === "QUESTION";
              },
              formatter: (r, c, v, i) => {
                const val_ = this.$localEnum.YesOrNoEnum_CN.find(
                  (el) => el.value === r.ifResponsible
                );
                return val_ ? val_.label : r.ifResponsible;
              },
            },
            {
              key: "responsibleDeptId",
              label: "责任部门",
              if: (row) => {
                return row.type === "QUESTION";
              },
              rules: (data, item, value) => {
                console.log(data, item);
                if (data.ifResponsible === "Y") {
                  return {
                    required: true,
                    message: "请选择责任部门",
                    trigger: "blur",
                  };
                }
                try {
                  this.$refs["workCloseRef"].clearValidate();
                } catch (e) {}
                // this.$refs["workCloseRef"].clearValidate();
                return { required: false };
              },
              render: (h, { data }) => {
                return h("dept_select_cascader", {
                  class: "form_input_default",
                  props: {
                    value: data.responsibleDeptId,
                  },
                  on: {
                    changeItem: (e) => {
                      this.$set(data, "responsibleDeptId", e.id);
                      this.$set(data, "responsibleDept", e.name);
                    },
                  },
                });
              },
            },
            {
              key: "ifCompensation",
              label: "是否产生赔偿",
              type: "select",
              enum: "YesOrNoEnum_CN",
              if: (row) => {
                return row.type === "QUESTION";
              },
              formatter: (r, c, v, i) => {
                const val_ = this.$localEnum.YesOrNoEnum_CN.find(
                  (el) => el.value === r.ifCompensation
                );
                return val_ ? val_.label : r.ifCompensation;
              },
            },
            {
              key: "compensationAmount",
              label: "赔偿金额",
              type: "input-number",
              if: (row) => {
                return row.type === "QUESTION";
              },
            },
            {
              key: "handleType",
              label: "处理方式",
              type: "input",
              if: (row) => {
                return row.type === "QUESTION";
              },
            },
            {
              key: "evaluation",
              label: "工单评价",
              type: "select",
              enum: "TicketsEvaluationEnum",
              if: (row) => {
                return row.type === "REQUIREMENT";
              },
            },
            {
              key: "evaluationDesc",
              label: "工单评价内容",
              attrs: { type: "textarea", autosize: { minRows: 2, maxRows: 6 } },
              if: (row) => {
                return row.type === "REQUIREMENT";
              },
            },
          ],
        },
      },
      defaultCheak: {
        ifUpgrade: "N",
        ifKeepTransfer: "N",
      },
      cheak_from: [
        // {
        //   key: "responsiblePerson",
        //   label: "核查责任方",
        //   type: "select",
        //   enum: "TicketsResponsiblePersonEnum",
        //   rules: {
        //     required: true,
        //     message: "请选择核查责任方",
        //     trigger: "change",
        //   },
        // },
        {
          key: "verifyUploadFiles",
          label: "核查文件",
          type: "upload-file",
          // attrs: { limit: 1 },
          render: (h, { data }) => {
            return h("ex-upload-file", {
              props: {
                // limit: 1,
                value: data.verifyUploadFiles,
              },
              on: {
                input: (list) => {
                  this.$set(data, "verifyUploadFiles", list);
                },
              },
            });
          },
        },
        {
          key: "verifyDesc",
          label: "核查描述",
          attrs: { type: "textarea", autosize: { minRows: 2, maxRows: 6 } },
          // formatter: (r, c, v, i) => this.$dateFormat(v),

          rules: {
            required: true,
            message: "请输入核查描述",
            trigger: "change",
          },
        },

        {
          key: "ifUpgrade",
          label: "是否升级",
          type: "select",
          enum: "YesOrNoEnum_CN",
          if: (data) => data.isShowUpgrade === "Y",
          formatter: (r, c, v, i) => {
            const val_ = this.$localEnum.YesOrNoEnum_CN.find(
              (el) => el.value === r.ifUpgrade
            );
            return val_ ? val_.label : r.ifUpgrade;
          },
          // formatter: (r, c, v, i) => this.$dateFormat(v),
        },
        {
          key: "upgradeReason",
          label: "升级原因",
          attrs: { type: "textarea", autosize: { minRows: 2, maxRows: 6 } },
          if: (data) => {
            if (data.ifUpgrade === "N") {
              this.$set(data, "upgradeReason", undefined);
              return false;
            }
            return true;
          },
          rules: {
            required: true,
            message: "请输入升级原因",
            trigger: "blur",
          },
          // formatter: (r, c, v, i) => this.$dateFormat(v),
        },
        {
          key: "ifKeepTransfer",
          label: "是否继续流转",
          type: "select",
          enum: "YesOrNoEnum_CN",
          formatter: (r, c, v, i) => {
            const val_ = this.$localEnum.YesOrNoEnum_CN.find(
              (el) => el.value === r.ifKeepTransfer
            );
            return val_ ? val_.label : r.ifKeepTransfer;
          },
          if: (data) => {
            if (!data.isShowUpgrade) {
              return true;
            }
            if (data.ifUpgrade === "Y") {
              this.$set(data, "ifKeepTransfer", undefined);
              return false;
            } else if (!data.ifKeepTransfer) {
              this.$set(data, "ifKeepTransfer", "N");
            }
            return true;
          },
          rules: {
            required: true,
            message: "请选择是否继续流转",
            trigger: "change",
          },
        },
        {
          key: "transferDeptIds",
          label: "流转部门",
          if: (data) => {
            if (data.ifUpgrade === "Y" || data.ifKeepTransfer === "N") {
              this.$set(data, "transferDeptIds", undefined);
              return false;
            }
            return true;
          },
          rules: {
            required: true,
            message: "请选择流转部门",
            trigger: "change",
          },
          render: (h, { data }) => {
            return h("dept_select_cascader", {
              class: "form_input_default",
              props: {
                value: data.transferDeptIds,
              },
              on: {
                changeItem: (e) => {
                  this.$set(data, "transferDeptIds", e.id);
                  // this.$set(data, "userDeptName", e.name);
                },
              },
            });
          },
        },
      ],
    };
  },
  created() {
    this.getCountStatus_num();

  },
  mounted() {
    // this.initTable();
  },
  methods: {
    initTable() {
      const data = this.init_table_model({dataType: 'current', filterAttrs: true})
      return data
    },
    changeTable(e, path, modelPath) {
      this.change_table_model( e, path, modelPath)
    },
    option_table_model() {
      return [
        { type: "selection", clickToggle: true },
        {
          key: "code",
          label: "工单编码",
          // minWidth: 120,
          "show-overflow-tooltip": true,
        },
        {
          key: "customerName",
          label: "客户名称",
          // width: 1200,
          "show-overflow-tooltip": true,
        },
        {
          key: "status",
          label: "状态",
          width: 120,
          "show-overflow-tooltip": true,
          formatter: (r, c, v, i) => {
            const val_ = this.$localEnum.TicketsStatusEnum.find(
              (el) => el.value === r.status
            );
            return val_ ? val_.label : r.status;
          },
        },
        {
          key: "type",
          label: "工单类型",
          // width: 120,
          "show-overflow-tooltip": true,
          formatter: (r, c, v, i) => {
            const val_ = this.$localEnum.TicketsTypeEnum.find(
              (el) => el.value === r.type
            );
            return val_ ? val_.label : r.type;
          },
        },
        // {
        //   key: "ticketsCatalogName",
        //   label: "工单目录",
        //   // minWidth: 120,
        //   "show-overflow-tooltip": true,
        // },
        {
          key: "description",
          label: "工单详细描述",
          // width: 120,
        },
        {
          key: "urgency",
          label: "紧急程度",
          width: 120,
          formatter: (r, c, v, i) => {
            const val_ = this.$localEnum.TicketsUrgencyEnum.find(
              (el) => el.value === r.urgency
            );
            return val_ ? val_.label : r.urgency;
          },
        },
        // {
        //   key: "urgency",
        //   label: "反馈方式",
        //   // width: 120,
        //   // formatter: (r, c, v, i) => this.$enumShow(v, "PrescriptionUnitEnum"),
        // },
        {
          key: "gmtSubmit",
          label: "提报时间",
          formatter: (r, c, v, i) => this.$dateFormat(v),
          // width: 120,
          // formatter: (r, c, v, i) => this.$enumShow(v, "PrescriptionUnitEnum"),
        },
        {
          key: "author",
          label: "提报人",
          // width: 120,
          // formatter: (r, c, v, i) => this.$enumShow(v, "PrescriptionUnitEnum"),
        },
        {
          key: "userDeptName",
          label: "跟进部门",
          // width: 120,
          // formatter: (r, c, v, i) => this.$enumShow(v, "PrescriptionUnitEnum"),
        },
        {
          key: "userRoleName",
          label: "跟进角色",
          // width: 120,
          // formatter: (r, c, v, i) => this.$enumShow(v, "PrescriptionUnitEnum"),
        },
        {
          key: "inWhichPart",
          label: "所在环节",
          // width: 120,
          // formatter: (r, c, v, i) => this.$enumShow(v, "PrescriptionUnitEnum"),
        },
        {
          key: "handleExpire",
          label: "处理是否已超时",
          width: 150,
          formatter: (r, c, v, i) => {
            return r.handleExpire === "Y" ? "是" : "否";
          },
        },
        {
          key: "transferExpire",
          label: "流转是否已超时",
          width: 150,
          formatter: (r, c, v, i) => {
            return r.transferExpire === "Y" ? "是" : "否";
          },
        },
        {
          type: "operate",
          width: 210,
          operate: [
            // {
            //   label: "复核",

            //   click: (row) => {},
            // },

            {
              type: "more",
              items: [
                {
                  label: "label_view_detail",
                  auth: `oms_workorder_detail_${this.rootId}`,
                  click: (row) => {
                    this.$router.push({
                      path: "/page/oms/workorder/workorder_detail",
                      query: { id: row.id },
                    });
                  },
                },
                {
                  label: "label_close_workorder",
                  auth: `oms_workorder_close_${this.rootId}`,
                  click: (row) => {
                    this.workClose_dialog.form.default = {
                      ticketsIds: row.id,
                      type: row.type,
                    };
                    this["$refs"]["workCloseRef"].show({ id: row.id });
                    this.clearFrom("workCloseRef");
                  },
                  if: (row) => ["TO_BE_HANDLE", "TO_BE_CONFIRMED"].includes(row.status),
                },
                {
                  // label: "核查反馈",
                  label: "label_view_examine",
                  auth: `oms_workorder_examine_${this.rootId}`,
                  click: (row) => {
                    this.onAcceptanceCatalogue(row, 2);
                  },
                  if: (row) => ["TO_BE_FEEDBACK", "TO_BE_HANDLE"].includes(row.status),
                },
              ],
            },
          ],
        },
      ];
    },
    clearFrom(Refs) {
      try {
        this.$nextTick(() => {
          this.$refs[Refs].clearValidate();
        });
      } catch (e) {}
    },
    getCountStatus_num() {
      this.$ajax({
        url: "/oms-api/tickets/OmsBaseTicketsRpc/countStatus.json",
        method: "post",
        type: "json",
        loading: true,
        params: {
          rootId: this.rootId,
        },
        success: (res) => {
          this.CountStatus = res.data;
        },
      });
    },

    // 核查详情点击工单
    onTableSearch(businessCode, ref_code) {
      console.log("this.$refs.SuperTablePage", this.$refs.SuperTablePage);
      if (!ref_code) return;
      this["$refs"][ref_code].visible = false;
      this.$refs.SuperTablePage.setSearchData({
        businessCode: businessCode,
        rootId: this.rootId,
      });
      this.$nextTick(() => {
        this.$refs["SuperTablePage"].loadDataForSearch();
      });
    },

    // 工单受理
    onAcceptanceCatalogue(row, type = 1) {
      // row
      const dialog_val = JSON.parse(JSON.stringify(this.workorder_dialog));
      const map_val = dialog_val.form.model.map((el) => {
        const val = {
          key: el.key,
          label: el.label,
          formType: "text",
        };
        switch (el.label) {
          case "工单目录":
            val.key = "ticketsCatalogName";
            break;
          case "工单类型":
            val.formatter = (r, c, v, i) => {
              const val_ = this.$localEnum.TicketsTypeEnum.find(
                (el) => el.value === r.type
              );
              return val_ ? val_.label : r.type;
            };
            break;
          case "业务分类":
            val.formatter = (r, c, v, i) => {
              const val_ = this.$localEnum.TicketsBusinessClassifyEnum.find(
                (el) => el.value === r.businessClassify
              );
              return val_ ? val_.label : r.businessClassify;
            };
            break;
          case "紧急程度":
            val.formatter = (r, c, v, i) => {
              const val_ = this.$localEnum.TicketsUrgencyEnum.find(
                (el) => el.value === r.urgency
              );
              return val_ ? val_.label : r.urgency;
            };
            break;

          case "附件":
            val.render = (h, { data }) => {
              return h("ex-upload-file", {
                props: {
                  limit: 1,
                  value: data.uploadFiles,
                  disabled: true,
                  readonly: true,
                },
              });
            };
            break;
          case "业务单号":
            val.render = (h, { data }) => {
              if (data.businessCode) {
                return h(
                  "div",
                  {
                    class: "flex_row_center",
                  },
                  [
                    h("span", {}, data.businessCode),
                    h(
                      "el-button",
                      {
                        // class: 'el-icon-arrow-down el-icon--right',
                        style: { marginLeft: "20px" },
                        props: { type: "primary" },
                        on: {
                          click: (e) =>
                            this.onTableSearch(data.businessCode, "AcceptanceRef"),
                        },
                      },
                      "查看工单"
                    ),
                  ]
                );
              }
              return data.businessCode;
            };

            break;
        }
        // if (el.formatter) {
        //   val.formatter = el.formatter || null;
        // }
        return val;
      });

      const default_val = { ticketId: row.is };
      if (type === 1) {
        // 工单受理
        dialog_val.form.default = default_val;
        dialog_val.title = "工单受理";
        dialog_val.submitUrl = "/oms-api/tickets/OmsBaseTicketsRpc/accept.json";
        dialog_val.form.model = [
          ...this.detailsField,
          ...map_val,
          ...this.acceptance_from,
        ];
      }
      if (type === 2) {
        const DTOS = {
          key: "verifyRecordDTOS",
          label: "升级数据",
          if: (r) => r.verifyRecordDTOS && r.verifyRecordDTOS.length > 0,
          render: (h, { data }) => {
            const list = [];
            //
            data.verifyRecordDTOS.map((el) => {
              if (el.ifUpgrade === "Y") {
                list.push(
                  h(
                    "div",
                    {},
                    `升级原因：${el.upgradeReason || ""} ; 核查反馈信息：${
                      el.verifyDesc || ""
                    }`
                  )
                );
              }
            });
            return h(
              "div",
              {
                class: "verifyRecordDTOS",
              },
              list
            );
          },
        };
        // 核查反馈
        dialog_val.form.default = { ...default_val, ...this.defaultCheak };
        dialog_val.title = "核查反馈";
        dialog_val.submitUrl = "/oms-api/tickets/OmsBaseTicketsRpc/verify.json";
        dialog_val.form.model = [
          ...this.detailsField,
          ...map_val,
          DTOS,
          ...this.cheak_from,
        ];
      }
      // defaultCheak;
      this.catalogue_dialog = dialog_val;

      try {
        this["$refs"]["AcceptanceRef"].show({ id: row.id });
        this.clearFrom("AcceptanceRef");
      } catch (error) {
        this.$nextTick(() => {
          this["$refs"]["AcceptanceRef"].show({ id: row.id });
          this.clearFrom("AcceptanceRef");
        });
      }

      // this.workorder_dialog.title = "工单受理";
      //   // this["$refs"]["catalogueRef"].show();
      //   this["$refs"]["catalogueRef"].show(this.selection[0], { setData: true });
    },
    exportExcel() {
      business_function.confirmOperateBaseSelectOrForm.call(this, {
        data: this.$refs.SuperTablePage.getSearchFormData(),
        model: this.option.search.model,
        selection: this.selection,
        callback: (selection, data) => {
          let params = {};
          if (!_.isEmpty(selection)) {
            params = {
              ids: selection.map((it) => it.id),
              rootId: this.rootId,
            };
          } else {
            params = data;
          }
          this.$functionCommon({
            url: "/oms-api/tickets/OmsBaseTicketsRpc/export.json",
            data: params,
            type: "form",
          });
        },
      });
    },
    onEnableCatalogue(rows) {
      this.$confirm(
        `将确认选择的${rows.length}个目录，是否确认？`,
        this.$tt("label_tip"),
        {
          type: "warning",
        }
      )
        .then(() => {
          this.$ajax({
            url: "/oms-api/tickets/OmsBaseTicketsCatalogRpc/disable.json",
            method: "post",
            type: "json",
            loading: true,
            data: {
              ids: rows.map((it) => {
                return it.id;
              }),
            },
            success: (res) => {
              this.$message({
                showClose: true,
                message: this.$tt("tip_submit_success"),
                type: "success",
              });
              this.reload();
            },
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="less" scoped>
.CountStatus {
  padding: 10px 0;
  display: inline-block;
  max-width: 1000px;
}
.labelClassName,
.contentClassName {
  text-align: center !important;
}
/deep/ .row_2_box,
/deep/ .row_2_input {
  width: 77rem;
}
.verifyRecordDTOS {
  background-color: red;
}
</style>
